<template>
  <div class="xq-form-wrapper">
    <div class="r-msg-status">
      <div class="s-item" v-for="(item, index) in numArr" :key="item.type">
        <div class="s-item-t">{{ item.name }}</div>
        <div class="s-item-b">{{ item.num || 0 }}</div>
        <div class="s-item-line" v-if="index != numArr.length - 1"></div>
      </div>
    </div>
    <div class="xq-form-search">
      <a-input-search
        allowClear
        v-model="jobSeekerNameOrCode"
        placeholder="姓名/身份证号/手机号"
        class="mr12"
        style="width: 200px;"
        @search="onSearch"
      />
      <div style="text-align: right; margin-top: -32px;">
        <a-space>
          <a-button @click="batchSelectVisible = true" class="mr2">
            同步经纪人
          </a-button>
          <a-button type="primary" icon="plus" @click="onAdd">
            新建经纪人
          </a-button>
        </a-space>
      </div>
    </div>
    <div class="xq-form-wrapper">
      <a-spin :spinning="spinning" class="xq-form-content" style="margin-top: 24px">
        <XqTable
          :customize="FormJson['config']['table']['customize']"
          :scroll="{ x: columns.length * 150 }"
          :pagination="false"
          :dataSource="tableData"
          :columns="columns"
          class="xq-form-content-table"
          :row-selection="
            FormJson['config']['table']['extend']['batch']
              ? {
                  selectedRowKeys: selectedRowKeys,
                  onChange: onSelectChange
                }
              : null
          "
          @change="onTableChange"
        >
          <!-- 主要内容，表格，自定义 header -->
          <template v-for="(col, index) in columns" v-slot:[`xq_${col.dataIndex}`]>
            <span :key="index">
              {{ col.customTitle }}
            </span>
          </template>
          <!-- 主要内容，表格，自定义 td -->
          <!-- eslint-disable-next-line prettier/prettier -->
          <template v-for="(col, index) in columns" v-slot:[col.dataIndex]="text, record">
            <!-- <img :src="record.avatar" class="avatar" /> -->
            <span v-if="col.dataIndex === 'name'" :key="index"> {{ text }} </span>
            <span v-else-if="col.dataIndex === 'gmtCreate'" :key="index">
              {{ text ? moment(text).format("YYYY-MM-DD") : "" }}
            </span>
            <span v-else-if="col.dataIndex === 'sourceType'" :key="index">
              <span v-if="text == 1">手动添加</span>
              <span v-if="text == 2">同步数据</span>
            </span>
            <span v-else-if="col.dataIndex === 'tableAction'" :key="index">
              <a @click="onMsg(record.brokerId)">推荐详情</a>
              <tableActionPoint style="vertical-align: bottom;">
                <li :class="record.sourceType == 2 ? 'economic-action-eli' : ''">
                  <a
                    style="width: 100%; height: 100%; display: inline-block;color: rgba(0, 0, 0, 0.65);"
                    :style="record.sourceType == 2 ? 'color: rgba(0, 0, 0, 0.25) !important;' : ''"
                    :disabled="record.sourceType == 2"
                    @click="onEdit(record)"
                    >编辑</a
                  >
                </li>
                <li @click="onDelete(record)">
                  删除
                </li>
              </tableActionPoint>
            </span>
            <XqTableCell v-else :key="index" :record="record" :field="FormJson['fields'][col.dataIndex]" :dynamicData="dynamicData" />
          </template>
        </XqTable>
        <div class="xq-form-content-pagination">
          <div class="xq-form-content-pagination-total">共 {{ total }} 条</div>
          <a-pagination
            v-model="pageNo"
            :page-size="pageSize"
            :total="total"
            :show-size-changer="true"
            :show-quick-jumper="true"
            :page-size-options="['10', '20', '50', '100']"
            @change="onPageChange"
            @showSizeChange="onPageSizeChange"
          />
        </div>
      </a-spin>
    </div>
    <add :visible.sync="visible" @upDate="upDate" :dataJson="dataJson" />
    <msg :visibleMsg.sync="visibleMsg" :brokerId="brokerId" />
    <batchSelectModal :visible.sync="batchSelectVisible" @upDate="onGetBrokerPageById" />
    <delModal :visible.sync="delVisible" title="确定删除该经纪人吗？" @onOk="onOk" />
  </div>
</template>

<script>
import FormJson from "./FormJson";
import XqCurdMixin from "xqjr-plugin-form/mixins/XqCurdMixin";
import { getCompanyBrokerInfoById, getBrokerPageById, delBrokerId } from "./api";
import delModal from "../../component/delModal";
import add from "./component/add";
import msg from "./component/msg";
import batchSelectModal from "./component/batchSelectModal";
import tableActionPoint from "./component/tableActionPoint";
import moment from "moment";

const curdMixin = new XqCurdMixin({
  FormJson,
  tableConfigKey: "table"
});

export default {
  components: {
    add,
    msg,
    batchSelectModal,
    tableActionPoint,
    delModal
  },
  mixins: [curdMixin],
  data() {
    return {
      numArr: [
        { type: "1", name: "已投递总人数", num: 0 },
        { type: "2", name: "已入职总人数", num: 0 },
        { type: "3", name: "经纪人总数", num: 0 },
        { type: "4", name: "已投递职位数", num: 0 },
        { type: "5", name: "今日投递人数", num: 0 }
      ],
      socCity: "",
      socCityName: "",
      visible: false,
      visibleMsg: false,
      spinning: false,
      tableData: [],
      jobSeekerNameOrCode: "",
      total: 0,
      pageNo: 1,
      pageSize: 20,
      brokerId: "",
      dataJson: {},
      batchSelectVisible: false,
      deleteRecordID: "",
      delVisible: false
    };
  },
  created() {
    this.onGetCompanyBrokerInfoById();
    this.onGetBrokerPageById();
  },
  methods: {
    moment,
    async onGetCompanyBrokerInfoById() {
      try {
        const { data } = await getCompanyBrokerInfoById();
        this.numArr[0].num = data.totalCount;
        this.numArr[1].num = data.successfulEntryCount;
        this.numArr[2].num = data.brokerCount;
        this.numArr[3].num = data.distributionPositionCount;
        this.numArr[4].num = data.dayRecommendCount;
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    async onGetBrokerPageById() {
      try {
        this.spinning = true;
        const { data } = await getBrokerPageById({
          jobSeekerNameOrCodeOrPhone: this.jobSeekerNameOrCode,
          address: this.socCityName,
          pageNo: this.pageNo,
          pageSize: this.pageSize
        });
        this.tableData = data.entities;
        this.total = data.entityCount;
        setTimeout(() => (this.spinning = false), 500);
      } catch (err) {
        console.log("error log --> ", err);
        setTimeout(() => (this.spinning = false), 500);
      }
    },
    onPageChange(page) {
      this.pageNo = page;
      this.onGetBrokerPageById();
    },
    onPageSizeChange(current, pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.onGetBrokerPageById();
    },
    onSearch() {
      this.pageNo = 1;
      this.onGetBrokerPageById();
    },
    handleCity(e) {
      if (e.value.length > 0) {
        const value = e.value;
        const label = e.label;
        this.socCity = value[value.length - 1].toString();
        if (label.length && label.length === 3) {
          this.socCityName = label[0] + "/" + label[1] + "/" + label[2];
        } else if (label.length && label.length === 2) {
          this.socCityName = label[0] + "/" + label[1];
        }
      } else {
        this.socCity = "";
        this.socCityName = "";
      }
      this.pageNo = 1;
      this.onGetBrokerPageById();
    },
    async onDelete(e) {
      this.deleteRecordID = e.brokerId;
      this.delVisible = true;
    },
    async onOk() {
      try {
        await delBrokerId(this.deleteRecordID);
        if (this.tableData.length === 1) {
          this.pageNo = 1;
        }
        this.onGetBrokerPageById();
        this.$notification["success"]({
          message: "删除成功"
        });
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    onAdd() {
      this.dataJson = {};
      this.visible = true;
    },
    onEdit(e) {
      this.dataJson = {
        id: e.brokerId,
        name: e.name,
        code: e.code,
        phone: e.phone,
        resourceUserId: e.brokerResourceUserId
      };
      this.visible = true;
    },
    onMsg(e) {
      this.brokerId = e;
      this.visibleMsg = true;
    },
    upDate() {
      this.onGetCompanyBrokerInfoById();
      this.onGetBrokerPageById();
    }
  }
};
</script>

<style lang="scss" scoped>
.r-msg-status {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 100px;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  margin-bottom: 24px;
  .s-item {
    width: 25%;
    box-sizing: border-box;
    padding-top: 24px;
    padding-left: 24px;
    position: relative;
    .s-item-t {
      color: #767885;
    }
    .s-item-b {
      font-size: 24px;
      font-weight: bold;
      color: #55565d;
    }
    .s-item-line {
      position: absolute;
      top: 32px;
      right: 0;
      width: 1px;
      height: 36px;
      background: #e8e8e8;
    }
  }
}
.avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
</style>
